<template>
  <!-- 店铺前台 -->
	<view class="store-container">
    <!-- 导航栏 -->
		<u-navbar :background="{ backgroundColor: '#FBD220' }" :border-bottom="false">
      <view class="slot-wrap-nav flex flex-ai-c">
        <!-- 搜索框 -->
        <view class="input-box flex flex-ai-c">
          <i-icon icon="iconsousuo" size="30rpx" color="#999"></i-icon>
          <input type="text" v-model="keyword" placeholder="品牌/车型/配件" confirm-type="search" placeholder-class="font-26 color-999" class="input-style">
        </view>
        
        <!-- 分享 -->
        <!-- #ifdef APP-PLUS -->
        <view class="btn-share" @click="openSharePopup()">
          <i-icon icon="iconshare" size="45rpx" color="#333"></i-icon>
        </view>
        <!-- #endif -->
      </view>
    </u-navbar>
    
    <!-- 正文内容 -->
    <view class="main">
      <!-- 店铺信息部分 -->
      <view class="u-skeleton">
        <store-card :info="storeInfo" :keysOption="storeKeysOption" @click.native="goDetailPage()" @collectChange="getStoreInfo"></store-card>
        <!-- 骨架屏 -->
        <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
      </view>
      
      <!-- 列表部分 -->
      <view class="list-container flex flex-dir-c" :style="{ height: `calc(100vh - ${statusBarHeight}rpx)` }">
        <template v-if="auth === 'CarStore'">
          <view class="tabs-box">
            <!-- tabs标题 -->
            <u-sticky
              :offset-top="offsetTop"
              bg-color="none"
              @fixed="tabTop = true"
              @unfixed="tabTop = false"
            >
              <view class="tabs-content">
                <!-- tabs标签 -->
                <u-tabs
                  :list="titleTabs"
                  :duration="0.3"
                  :is-scroll="false"
                  :current="current"
                  active-color="#FBB000"
                  :bar-width="70"
                  @change="tabsChange"
                ></u-tabs>
                
                <!-- 下拉筛选 -->
                <view class="filter-box">
                  <!-- 特供车源 -->
                  <view v-show="swiperCurrent === 0" class="down-sticky">
                    <car-source-filter
                      @change="filterCarListChange"
                      @open="filterOpen"
                    ></car-source-filter>
                  </view>
                  
                  <!-- 车品 -->
                  <view v-show="swiperCurrent === 1" class="down-sticky">
                    <car-goods-filter
                      :category-list="carGoodsCategoryList"
                      @change="filterCarGoodsListChange"
                    ></car-goods-filter>
                  </view>                  
                </view>
              </view>
            </u-sticky>
          </view>
          
          <!-- 列表内容 -->
          <swiper v-if="auth === 'CarStore'" :autoplay="false" :duration="300" :current="swiperCurrent" @change="listSwitch" class="swiper-box" style="flex: 1;">
            <!-- 车源 -->
            <swiper-item>
              <default-img :show="carList.length === 0" msg="暂无更多车源"></default-img>
              
              <scroll-view scroll-y @scrolltolower="scrollToBottom" class="swiper-item">
                <car-card :carList="carList"></car-card>
                <u-loadmore v-if="carList.length !== 0" :status="status[0]" :load-text="loadText[0]" margin-top="20" @loadmore="getCarList" class="more-box" />
              </scroll-view>
            </swiper-item>
            
            <!-- 车品 -->
            <swiper-item>
              <default-img :show="carGoodsList.length === 0" msg="暂无更多车品"></default-img>
              
              <scroll-view scroll-y @scrolltolower="scrollToBottom" class="swiper-item">
                <card-goods-item :carList="carGoodsList" :storeId="storeId"></card-goods-item>
                <u-loadmore v-if="carGoodsList.length !== 0" :status="status[1]" :load-text="loadText[1]" margin-top="20" @loadmore="getCarGoodsList" class="more-box" />
              </scroll-view>
            </swiper-item>
          </swiper>
        </template>
        
        <template v-else>
          <!-- tabs标题 -->
          <u-sticky
            offset-top="0"
            bg-color="none"
            @fixed="tabTop = true"
            @unfixed="tabTop = false"
          >
            <!-- 车品筛选 -->
            <view class="down-sticky">
              <car-goods-filter
                :category-list="carGoodsCategoryList"
                @change="filterCarGoodsListChange"
              ></car-goods-filter>
            </view>
          </u-sticky>
          
          <view class="list-box">
            <card-goods-item :carList="carGoodsList" :storeId="storeId"></card-goods-item>
            <u-loadmore :status="status[0]" :load-text="loadText[0]" margin-top="20" @loadmore="getCarList" class="more-box" />
          </view>
        </template>
      </view>
    </view>
    
    <!-- 分享弹窗选项 -->
    <i-share-popup v-model="sharePopupShow" @change="handleShare"></i-share-popup>
	</view>
</template>

<script>
  import storeCard from '@/components/store/store-card.vue'
  
  // 下拉筛选菜单组件
  import carSourceFilter from './components/car-source-filter.vue'
  import carGoodsFilter from './components/car-goods-filter.vue'
  
  // 商品列表卡片组件
  import carCard from './components/card-car-item.vue'
  import cardGoodsItem from './components/card-cargoods-item.vue'
  
  import iSharePopup from '@/components/i-share-popup.vue'
  import { share } from '@/utils/common-api.js'
  
  // 获取系统状态栏的高度
  let systemInfo = uni.getSystemInfoSync();
  
	export default {
    components: {
      storeCard,
      carSourceFilter,
      carGoodsFilter,
      carCard,
      cardGoodsItem,
      iSharePopup
    },
		data() {
			return {
        loading: true, // 骨架屏加载
        statusBarHeight: systemInfo.statusBarHeight * 2 + 88,
        storeId: '',  // 店铺id
        // 店铺信息
        storeInfo: {
          city: "成都市",
          deposit: false,
          fans: "0",
          isgover: true,
          store_id: "",
          store_name: "四川合锐",
          licenseImg: "https://www.baidu.com/img/flexible/logo/plus_logo_web_2.png",
          store_type: 4
        },
        // 店铺信息key
        storeKeysOption: {
          headerImg: 'store_topimg',
          name: 'store_name',
          isgover: 'isgover',
          city: 'city',
          deposit: 'deposit',
          fans: 'fans'
        },
        
				keyword: '', // 搜索关键词
        tabTop: false, // 是否吸顶了
        auth: '', // 当前账号角色权限
        
        // tabs切换
        titleTabs: [
          {
            name: '车源',
            id: 0,
          },
          {
            name: '车品',
            id: 1,
          }
        ],
        current: 0, // 当前tab标签
        swiperCurrent: 0,  // 当前swiper切换页
        
        /* 车源相关 */
        carList: [],  // 车源列表
        carPageNow: 1, // 车源页码
        // 筛选车源列表品牌车型配置参数
        paramsCar: {
          brand_id: '',
          car_type_id: '',
          configuration_id: '',
          orderby: 0
        },
        
        /* 车品相关 */
        carGoodsList: [], // 车品列表
        carGoodsPageNow: 1,  // 车品页码
        carGoodsCategoryList: [], // 车品分类列表
        // 筛选车品列表
        paramsCarGoods: {
          car_supplie_type_Id: '',
          orderby: 0
        },
        
        status: ['loadmore', 'loadmore'], // 加载更多状态
        loadText: [
          {
            loadmore: '轻轻上拉',
            loading: '努力加载中',
            nomore: '我是有底线的哟'
          },
          {
            loadmore: '轻轻上拉',
            loading: '努力加载中',
            nomore: '我是有底线的哟'
          }
        ],  // 加载更多文字
        
        offsetTop: 0, // 吸顶距离
        sharePopupShow: false, // 分享弹出显示
			}
		},
    
    onLoad(e) {
      this.storeId = e.id
      // #ifdef APP-PLUS
      this.offsetTop = 88 + systemInfo.statusBarHeight
      // #endif
      uni.$on('updateStore', () => {
        this.getStoreInfo()
      })
    },
    
    created() {
      this.auth = uni.getStorageSync('Ztc_B_USER_INFO').permious
      // this.auth = 'factory'
      uni.showLoading()
      this.getStoreInfo()
      this.getCategoryList()
      
      if (this.auth === 'CarStore') {
        this.getCarList(() => {
          uni.hideLoading()
        })        
      } else {
        this.getCarGoodsList(() => {
          uni.hideLoading()
        })
      }
    },
    
		methods: {
			// 切换订单tab
			tabsChange(i) {
			  this.swiperCurrent = i
			  this.current = i
			},
      
      // 监听切换完tab的列表
      listSwitch(e) {
        let i = e.detail.current
        this.swiperCurrent = i
        this.current = i
        
        if (i === 0) {
          if (this.carList.length !== 0) return false
          uni.showLoading()
          this.getCarList(() => {
            uni.hideLoading()
          })
        } 
        if (i === 1) {
          if (this.carGoodsList.length !== 0) return false
          uni.showLoading()
          this.getCarGoodsList(() => {
            uni.hideLoading()
          })
        }
      },
      
      // 获取店铺信息
      async getStoreInfo() {
        try {
          const res = await this.$api.store.StoreHomePageBasics({
            store_id: this.storeId,
            current_store_id: this.$store.state.userInfoDetail.store.storeId
          })
          this.storeInfo = res.data
          this.loading = false
        } catch (e) {
          //
        }
      },
      
      // 获取分类列表
      async getCategoryList() {
        try {
          let data = {
            pageIndex: 1,
            pageSize: 100,
          }
          const res = await this.$api.carGoods.GetGoodsCarSupplieTypeListPaged(data)
          this.carGoodsCategoryList = res.data.list.map((item) => ({
            label: item.name,
            value: item.id,
          }))
        } catch (e) {
          //
        }
      },
      
      // 获取车源列表
      async getCarList(cb=()=>{}) {
        try {
          let data = {
            pageIndex: this.carPageNow,
            pageSize: 10,
            store_id: this.storeId,
            brand_id: this.paramsCar.brand_id,
            car_type_id: this.paramsCar.car_type_id,
            configuration_id: this.paramsCar.configuration_id,
            orderby: this.paramsCar.orderby
          }
          const res = await this.$api.store.StoreHomePageCarList(data)
          if (res.data.carlist && res.data.carlist.length !== 0) {
            this.carList = [...this.carList, ...res.data.carlist]
            this.carPageNow += 1
            
            let text = res.data.carlist.length < 10 ? 'nomore' : 'loadmore'
            this.status.splice(this.swiperCurrent, 1, text)
          } else {
            this.status.splice(this.swiperCurrent, 1, 'nomore')
          }
        } catch (e) {
          //
        }
        cb()
      },
      
      // 获取车品列表
      async getCarGoodsList(cb=()=>{}) {
        try {
          let data = {
            pageIndex: this.carGoodsPageNow,
            pageSize: 10,
            store_id: this.storeId,
            car_supplie_type_Id: this.paramsCarGoods.car_supplie_type_Id,
            orderby: this.paramsCarGoods.orderby
          }
          const res = await this.$api.store.StoreHomePageCarSuppliesList(data)
          if (res.data.carSuppliesLists && res.data.carSuppliesLists.length !== 0) {
            this.carGoodsList = [...this.carGoodsList, ...res.data.carSuppliesLists]
            this.carGoodsPageNow += 1
            
            let text = res.data.carSuppliesLists.length < 10 ? 'nomore' : 'loadmore'
            this.status.splice(this.swiperCurrent, 1, text)
          } else {
            this.status.splice(this.swiperCurrent, 1, 'nomore')
          }
        } catch (e) {
          //
        }
        cb()
      },
      
      // 滚动到底部触发请求
      scrollToBottom() {
        if (this.swiperCurrent === 0) {
          this.status.splice(this.swiperCurrent, 1, 'loading')
          this.getCarList()
        } else {
          this.status.splice(this.swiperCurrent, 1, 'loading')
          this.getCarGoodsList()
        }
      },
      
      // 加载更多
      clickLoadMore() {
        if (this.swiperCurrent === 0) {
          this.getCarList()
        } else {
          this.getCarGoodsList()
        }
      },
      
      // 筛选车源列表
      filterCarListChange({ type, id }) {
        // type: 0是品牌，1是排序
        switch (type) {
          case 0:
            this.paramsCar.brand_id = id.pid ? id.bid : '',
            this.paramsCar.car_type_id = id.pid ? id.xid : ''
            this.paramsCar.configuration_id = id.pid
            break
          case 1:
            this.paramsCar.orderby = id
            break
        }
        this.carList = [] // 清空车源列表
        this.carPageNow = 1
        uni.showLoading()
        this.getCarList(() => {
          uni.hideLoading()
        })
      },
      
      // 筛选车品列表
      filterCarGoodsListChange({ type, id }) {
        console.log(type, id)
        // type: 0是分类，1是排序
        switch (type) {
          case 0:
            this.paramsCarGoods.car_supplie_type_Id = id
            break
          case 1:
            this.paramsCarGoods.orderby = id
            break
        }
        this.carGoodsList = [] // 清空车品列表
        this.carGoodsPageNow = 1
        uni.showLoading()
        this.getCarGoodsList(() => {
          uni.hideLoading()
        })
      },
      
      // 筛选下拉打开时
      filterOpen() {
        if (this.tabTop) return false
        uni.pageScrollTo({
          scrollTop: 1200,
          duration: 100
        })
      },
      
      // 点击分享按钮
      openSharePopup() {
        this.sharePopupShow = !this.sharePopupShow
      },
      
      // 点击分享按钮执行
      handleShare(e) {
        // 分享方法
        share({
          type: 0,
          scene: e,
          summary: '超值特惠车品，速抢',
          href: 'https://ztcbs.yzsheng.com/#/pages_common/store/store?id=' + this.storeInfo.store_id
        }, status => {
          if (status) {
            uni.hideToast() // 关闭生成中提示
          } else {
            uni.showToast({
              title: '分享失败',
              duration: 2000,
              icon: 'none'
            })
          }
        })
      },
      
      // 跳转到店铺信息详情
      goDetailPage() {
        uni.navigateTo({
          url: `/pages_common/storeDetail/storeDetail?id=${this.storeId}`
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap-nav {
  width: 100%;
  // 搜索
  .input-box {
    flex: 1;
    height: 66rpx;
    padding: 0 30rpx;
    margin-right: 60rpx;
    background-color: #fff;
    border-radius: 33rpx;
    
    // 搜索输入框
    .input-style {
      height: 66rpx;
      margin-left: 18rpx;
      font-size: 26rpx;
    }
  }
  
  // 分享按钮
  .btn-share {
    margin-right: 28rpx;
    font-size: 0;
  }
}

// 店铺容器
.store-container {
  background-color: #f6f6f6;
}

// 正文内容
.main {
  
}

// 列表部分
.list-container {
  // height: 100vh;
  padding: 24rpx 24rpx 0;
  
  .tabs-box {
    background-color: #FFFFFF;
    border-radius: 10rpx;
  }
  
  // 筛选
  .filter-box {
    border-top: 1px solid #eee;
  }
  
  .swiper-box {
    flex: 1;
  }
  
  // swiper切换
  .swiper-item {
    height: 100%;
    padding-top: 20rpx;
    
    .more-box {
      padding-bottom: 20rpx;
    }
  }
  
  .list-box {
    padding-top: 20rpx;
  }
}
</style>
